{% extends 'index.html' %}
{% block panel %}
<li class="active"><a href="/main/">Inicio</a></li>
<li><a href="/contact/">Contacto</a></li>
<li><a href="/about/">Acerca de</a></li>
{% endblock %}

{% block principal %}
<form name="form1" class="well form-horizontal" method="POST" action="." enctype="multipart/form-data" > {% csrf_token %}
	<h1>{{ title }}</h1>
	
	<button type="button" class="btn" id="linkedin_btn" onclick="linkedin();">Conéctate con Linked<img src="http://s3.licdn.com/scds/common/u/img/favicon_v3.ico"></button>
	<div id="tokens"></div>
	
	<legend>Por favor, complete los siguientes campos</legend>
	
	{% if error %}
		<div class='alert alert-error'>
			{{ error }}
		</div>
	{% endif %}
		{% for i in form %}
		<div class="control-group">
			<label class="control-label">{{i.label}}</label> <div class="controls">{{ i }} <p class="help-block">{% autoescape off %}{{i.help_text }} {% endautoescape %}</p> {{i.errors}} </div>
		</div>
		{% endfor %}
		<br><br>
		<div class="modal hide fade" id="nuevoInteres" tabindex = "-1" role="dialog" aria-labelledby="nuevoInteresLabel" aria-hidden="true">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h3 id="myModalLabel">Nuevo Interés</h3>
			</div>
			<div class="well form-horizontal">
				{{ interes }}
			</div>
			<div class="modal-footer">
				<button type="submit" class="btn btn-primary" name="nuevointeres" value="nuevointeres">Agregar</button>
				<button data-dismiss="modal" class="btn" aria-hidden="true">Cancelar</button>
			</div>
		</div>
		
		<button type="submit" class="btn btn-primary">Guardar</button>
		<a href="#salir" class="btn" role="button" data-toggle="modal">Cancelar</a>
		
		<div class="modal hide fade" id="salir" tabindex = "-1" role="dialog" aria-labelledby="nuevoInteresLabel" aria-hidden="true">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h3 id="myModalLabel">¿Seguro que deseas cancelar? Se perderán todos los datos que no se han guardado anteriormente</h3>
			</div>
			<div class="modal-footer">
				<button data-dismiss="modal" class="btn btn-primary" aria-hidden="true">Seguir en la página</button>
				<a href="/main/" role="button" class="btn" >Salir</a>
			</div>
		</div>
		
		
		
		
</form>	
{% endblock %}

{% block scripts %}
<script>
	$('.errorlist').wrap('<div class="alert alert-error"></div>');
	$('.alert.alert-error').prepend('<button type="button" class="close" data-dismiss="alert">x</button>');
	var li_flag = false;
	var contenido = '';
	function linkedin(){
		if (!li_flag){
			li_flag = true;
			$.get('/linkedin/', function(data){
				$('#tokens').html(data);
				$('#linkedin_btn').hide();
			}
			);
		}
	}
	
	function obtener(){
		$.ajax({
			url: '/linkedin/',
			type: 'POST',
			data:{
				pin: document.form1.pin.value,
				csrfmiddlewaretoken: document.form1.csrfmiddlewaretoken.value
			},
			success: function(msg){
				contenido = msg;
				var xml = contenido, xmlDoc = $.parseXML( contenido ), $xml = $(xmlDoc), $title = $xml.find('title')
				document.form1.nombres.value = $xml.find('first-name').text();
				document.form1.apellidos.value = $xml.find('last-name').text();
				document.form1.correo.value = $xml.find('email-address').text();
				document.form1.nacimiento_day.value = $xml.find('day').text();
				document.form1.nacimiento_month.value = $xml.find('month').text();
				document.form1.nacimiento_year.value = $xml.find('year').text();
			}
			
		}
		);
	}
</script>
{% endblock %}
